<template>
  <div>
    <Ditu></Ditu>
    <Headera></Headera>
    <Nav></Nav>
    <Headera></Headera>

    <!-- <Dingwei></Dingwei> -->

    <div>
      <div class="wrapper">
        <div class="warptop" @click="dianji">
          <img v-if="isactive" src="../assets/标签1@2x.png" alt />
          <img v-else src="../assets/标签2@2x.png" alt />

          <div class="content">
            <div class="content_top">{{$store.state.address}}</div>
            <div class="content_bottom">{{$store.state.num}}</div>
          </div>

          <div class="content_right">18939251116</div>

          <div class="right">
            <img src="../assets/跳转箭头@2x.png" alt />
          </div>
        </div>
        <div class="warpbottom" @click="click">
          <img v-if="active" src="../assets/标签1@2x.png" alt />
          <img v-else src="../assets/标签2@2x.png" alt />

          <div class="content_bottom">
            <input type="text" placeholder="请填写收货地址" />
          </div>

          <div class="content_bottom_right">
            <img src="../assets/跳转箭头@2x.png" alt />
          </div>
        </div>
        <div class="btn_gobuy">去下单</div>
      </div>
    </div>
  </div>
</template>

<script>
import Ditu from "./ditu";
import Headera from "./Headera";
import Nav from "./nav1";
import Dingwei from "./Dingwei";

// import getCurrentCityName from "../../getUserLocation";
export default {
  name: "Bang",
  components: {
    Ditu,
    Headera,
    Nav,
    Dingwei
  },

  data() {
    return {
      isactive: true,
      active: true,
      cityName: "",
      newname: ""
    };
  },
  mounted() {
    // this.getCurrentCity();
  },
  methods: {
    dianji() {
      this.isactive = !this.isactive;
    },
    click() {
      this.active = !this.active;
    }
    // getCurrentCity(){
    //   getCurrentCityName().then((city)=>{
    //     this.cityName=city
    //     this.newname=city
    //     this.cityName=this.cityName.substring(0,6)
    //     this.newname=this.newname.substring(6)
    //     console.log(city)
    //   })
    // },
  }
};
</script>

<style scoped lang="less">
.wrapper {
  width: 95vw;
  height: 50vw;
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  // top: 128vw;
  overflow: hidden;
  //   border: 1px solid red;
  border-radius: 2px 2px 0 0;
  margin-left: 2vw;
  background: #fff;
  bottom: 0vw;

  .warptop {
    position: absolute;
    width: 95vw;
    height: 10vw;
    //   border: 1px solid blue;
    // margin-bottom: 0vh;
    display: inline-block;
    // box-shadow:  ;
    img {
      display: block;
      margin-top: 6vw;
      margin-left: 2vw;
    }

    .content {
      position: absolute;
      width: 85vw;
      height: 19vw;
      //   border: 1px solid red;
      margin-top: -13vw;
      margin-left: 10vw;
      box-shadow: 0 0.04vw;

      .content_top {
        margin-top: 5vw;
        font-size: 4vw;
        color: #1a1a1a;
      }
      .content_bottom {
        font-size: 4vw;
        color: #9999;
        margin-top: 1vw;
      }
    }
    .content_right {
      position: absolute;
      width: 10vw;
      height: 5vw;
      //   border:1px solid red;
      margin-top: -9vw;
      margin-left: 55vw;
      font-size: 4vw;
      text-align: center;
      line-height: 8vw;
    }
    .right {
      position: absolute;
      width: 10vw;
      height: 5vw;
      //   border:1px solid red;
      margin-top: -5vw;
      margin-left: 81vw;
      img {
        display: block;
        margin-top: 1vw;
        width: 2.5vw;
      }
    }
  }

  .warpbottom {
    position: absolute;
    width: 95vw;
    height: 10vw;
    //   border: 1px solid red;
    margin-top: 17vw;

    img {
      display: block;
      margin-top: 7vw;
      margin-left: 2vw;
    }

    .content_bottom {
      position: absolute;
      width: 50vw;
      height: 10vww;
      //   border: 1px solid red;
      margin-top: -11vw;
      margin-left: 10vw;
      font-size: 7px;
      color: #9999;
      line-height: 10vw;

      input {
        width: 50vw;
        height: 17vw;
        font-size: 4vw;
        color: #cccccc;
        background: none;
        outline: none;
        border: 0;
      }
    }

    .content_bottom_right {
      position: absolute;
      width: 10vw;
      height: 5vw;
      //   border:1px solid red;
      margin-top: -7vw;
      margin-left: 81vw;
      img {
        display: block;
        margin-top: 2vw;
        width: 2.5vw;
      }
    }
  }

  .btn_gobuy {
    width: 95vw;
    height: 13vw;
    line-height: 12vw;
    background-color: #222222;
    box-shadow: 0vw 0vw 2vw 0vw rgba(0, 0, 0, 0.2);
    border-radius: 1vw;
    color: #fff;
    text-align: center;
    //   margin:0 1vw;
    font-size: 5vw;

    margin-top: 36vw;
  }
}
</style>